<template>
  <div class="hello">
    <!-- 头像和用户名区域 -->
    <div class="user-info">
      <img :src="avatarUrl" :width="avatarWidth" :height="avatarHeight" alt="头像" class="avatar">
      <span :style="{ fontSize: `${usernameSize}px`, color: usernameColor }" class="username">{{ username }}</span>
    </div>
    <!-- 标题区域 -->
    <h1 :style="{ fontSize: `${titleSize}px`, color: titleColor }" class="title">{{ title }}</h1>
    <!-- 图片区域 -->
    <img :src="mainImageUrl" :width="mainImageWidth" :height="mainImageHeight" alt="主图" class="main-image">
    <!-- 文案区域 -->
    <p :style="{ fontSize: `${descriptionSize}px`, color: descriptionColor }" class="description">{{ description }}</p>
  </div>
</template>

<script>
export default {
  // 定义组件接收的属性
  props: {
    avatarUrl: {
      type: String,
      required: true
    },
    username: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    mainImageUrl: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    avatarWidth: {
      type: Number,
      default: 50
    },
    avatarHeight: {
      type: Number,
      default: 50
    },
    mainImageWidth: {
      type: Number,
      default: 400
    },
    mainImageHeight: {
      type: Number,
      default: 300
    },
    usernameSize: {
      type: Number,
      default: 16
    },
    titleSize: {
      type: Number,
      default: 24
    },
    descriptionSize: {
      type: Number,
      default: 14
    },
    usernameColor: {
      type: String,
      default: "#ffffff"
    },
    titleColor: {
      type: String,
      default: "#ffc107"
    },
    descriptionColor: {
      type: String,
      default: "#ffffff"
    }
  },
  computed: {
    // 在 Vue 2 中，虽然不需要像 toRefs 那样处理响应式，但可以用计算属性来提供更方便的访问方式
    // 这里可以根据需要决定是否添加，实际使用中 props 可以直接访问
    // 例如，如果希望在模板中使用更简洁的变量名，可以添加如下计算属性
    avatarUrlComputed() {
      return this.avatarUrl;
    },
    usernameComputed() {
      return this.username;
    },
    titleComputed() {
      return this.title;
    },
    mainImageUrlComputed() {
      return this.mainImageUrl;
    },
    descriptionComputed() {
      return this.description;
    },
    avatarWidthComputed() {
      return this.avatarWidth;
    },
    avatarHeightComputed() {
      return this.avatarHeight;
    },
    mainImageWidthComputed() {
      return this.mainImageWidth;
    },
    mainImageHeightComputed() {
      return this.mainImageHeight;
    },
    usernameSizeComputed() {
      return this.usernameSize;
    },
    titleSizeComputed() {
      return this.titleSize;
    },
    descriptionSizeComputed() {
      return this.descriptionSize;
    },
    usernameColorComputed() {
      return this.usernameColor;
    },
    titleColorComputed() {
      return this.titleColor;
    },
    descriptionColorComputed() {
      return this.descriptionColor;
    }
  }
};
</script>

<style scoped>
.hello {
  width: 501px;
  height: 800px;
  background-color: #222; /* 稍微调整背景色 */
  color: #fff;
  padding: 20px;
  /* border-radius: 8px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
}

.avatar {
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover; /* 确保头像显示正常 */
}

.title {
  margin-bottom: 20px;
}

.main-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 4px;
}

.description {
  line-height: 1.6;
}
</style>